<template>
  <div>
    <!-- start 加载 -->
    <div :class="load ? 'is_load' : ''">
      <van-loading type="spinner" v-if="load" color="#1989fa">
        <span style="color: #1989fa">加载中...</span>
      </van-loading>
    </div>
    <!-- End 加载 -->
    <div class="index-wrap" v-if="type == 0">
      <div
        class="goods-wrap shadow"
        v-for="(item,index) in data"
        :key="index"
        @click="$emit('getDetails',item)"
      >
        <div v-lazy:background-image="item.avatar" class="avatar"></div>
        <div class="info">
          <p class="title">{{ item.title }}</p>
          <p class="price">
            ¥ {{ item.price }}
            <span style="font-size: 10px;color: #666">0 人付款</span>
          </p>
        </div>
      </div>
    </div>
    <div class="index-wrap" v-else>
      <div
        class="goods-wrap shadow"
        v-for="(item,index) in data"
        :key="index"
        @click="$emit('getDetail',item,type)"
      >
        <div v-lazy:background-image="item.avatar" class="avatar"></div>
        <div class="info">
          <p class="title">{{ item.title }}</p>
          <p class="price">
            ¥ {{ item.price }}
            <span>0 人付款</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "rows3_Goods",
  props: {
    data: [Array, Object],
    type: [Number, String],
    load: [Boolean, String],
    HeightSize: [String]
  }
};
</script>
<style scoped>
.is_load,
.dataNull {
  text-align: center;
  line-height: 200px;
  height: 100%;
  width: 100%;
  color: white;
  background-color: rgba(170, 170, 170, 0.2);
  z-index: 10;
  margin-bottom: 10px;
}

.index-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 7px;
  grid-row-gap: 7px;
  transition: 0.3s;
}

.goods-wrap {
  display: grid;
  grid-template-rows: 115.66px 70px;
  background: white;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
}

.goods-wrap .avatar {
  width: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 0 0 0 0;
}

.goods-wrap .info p {
  margin: 0.5rem;
}
.goods-wrap .info span {
  font-size: 10px;color: #666
}

.goods-wrap .info .title {
  box-sizing: border-box;
  box-sizing: border-box;
  height: 31px;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  color: #232326;
  margin-top: 5px;
  line-height: 16px;
}

.goods-wrap .price {
  color: rgb(225, 37, 27);
}

@media screen and (min-width: 300px) and (max-width: 350px) {
  .goods-wrap {
    grid-template-rows: 97.3px 75px;
  }
  .goods-wrap .info span {
      display: block
  }
}

@media screen and (min-width: 350px) and (max-width: 399px) {
  .goods-wrap {
    grid-template-rows: 115.66px 70px;
  }
}

@media screen and (min-width: 400px) and (max-width: 420px) {
  .goods-wrap {
    grid-template-rows: 128.65px 70px;
  }
}
</style>
